<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
       html{
           height:100%;
       }
       body{
           height: 100%;
           margin:0px;

           /*设置body为弹性盒子*/
           display:flex;
           /*设置body中的子元素<main>竖直方向，水平方向居中*/
           align-items: center;
           justify-content: center;

           /*文本居中*/
           text-align:center;
           font-size: 100px;
           color:lawngreen;

           background-color:black;
       
       }
    
    </style>
</head>
<body>
    <h1>程珊是一个混蛋</h1>
   <main>
       <div id="time">14:30:42</div>
       <div id="date">2017年2月9日 周四</div>
       </main>  
       <script>
          //定义一个函数update,该函数的主要功能是获取当前时间，并且将获取的时间显示在页面上。
          function update(){
              //获取当前日期事件对象
              var now = new Date()
              console.log(now)

              //获取当前时/分/秒
              var hour = now.getHours();//0~23
              console.log(hour)

              var minute = now.getMinutes()//0~59
              console.log(minute)

              var seconds= now.getSeconds()//0~59
              console.log(seconds)
               
            //如果获取到时/分/秒 小于10，
            //那么应该在这个在这个值前面 添加一个‘0’
         
            if (hour<10){
                hour = "0 "+hour
            }
            if(minute <10){
                minute ="0" + minute
            }
            if(seconds <10){
                seconds ="0" + seconds
            }


              //将时分秒拼接到一起，修改第一个div中的文本内容
              var timeStr = hour+":" + minute +":" + seconds
              console.log(timeStr)

            //   根据 id 找到第一个div
            var timeDiv =document.getElementById('time')
            //修改div中的文本内容
            timeDiv.innerText = timeStr

            //获取当时的年/月/日
            var year = now .getFullYear()
            var month = now.getMonth() +1//0~11
            var date = now .getDate()

            var week =now.getDay() //0~6(0表示的是周日)
            if (week == 0){
                week ='周日'
            }
            if(week ==1){
                week = '周一'
            }
            if(week ==2){
                week = '周二'
            }
            if(week ==3){
                week = '周三'
            }
            if(week ==4){
                week = '周四'
            }
            if(week ==5){
                week = '周五'
            }
            if(week ==6){
                week = '周六'
            }
            // 将获取到的年/月/日/周几 拼接到一起
            var dateStr = year +'-' + month +'-' + date + ''+ week

            //根据id找第二个 div
            var dateDiv = document.getElementById('date')
            dateDiv.innerText = dateStr
          }
          update()
          //每间隔一秒钟，就要调用一次 update 函数，让时间持续更新
          //1秒 = 1000毫秒
          setInterval(update,1000)
   
       </script> 
</body>
</html>